import React from 'react'
import BaseComponent from 'basecomponent'
import LinkNavbar from 'link-navbar'
import AntTable from 'anttable'
import FuncButton from "../../../../../../../redux-components/func-button/index";
import apis from 'apis'
import moment from 'moment'
import './style.scss'

class Job extends BaseComponent{
  constructor() {
    super(...arguments);
    this.state={
      currentPage: 1,
      pageSize: 6,
      qualityData: [],
      deleted: false,
      recommendNum: 0,
      isLoadingQuality: false
    }
  }

  componentDidMount(){
    this.getQualityList()
  }

  shouldComponentUpdate(nextProps, nextState) {
    if(!nextProps.children && this.state.qualityData.length !== this.state.recommendNum && !nextState.isLoadingQuality){
      console.log('data length',+ this.state.qualityData.length, 'recommendNum', this.state.recommendNum)
      this.getQualityList();
    }
    if(nextProps.children){
      nextProps.children.props.setNum = this.setNum.bind(this)
    }
    if(this.state.deleted){
      this.setState({deleted: false})
      console.log('deleted')
    }
    return true
  }

  setNum(num) {
    this.setState({recommendNum: num})
  }

  getQualityList(){
    this.setState({isLoadingQuality: true})
    this.qualityRP = apis.quality.getFensheng(0); // quality
    this.registerRequest(this.qualityRP.request);
    this.qualityRP.promise
      .then((res)=>{
        let data = res.Data || []
        res.Data&&this.setState({qualityData: data, recommendNum: data.length,isLoadingQuality: false});
      })
      .catch((err)=>{
        alert(err.msg)
        this.setState({isLoadingQuality: false});
      })
  }

  topQuality(text,record){
    let qualityData = {}
    if(record.Order && record.Order === 1){
      qualityData = Object.assign({}, record, {Order: 0})
    }else{
      qualityData = Object.assign({}, record, {Order: 1})
    }
    this.reviseQualityRP && this.reviseQualityRP.request.abort()
    this.reviseQualityRP = apis.quality.reviseQuality(qualityData.Id, qualityData)
    this.registerRequest(this.reviseQualityRP.request)
    this.reviseQualityRP.promise
      .then((res) => {
        alert('成功')
        this.getQualityList()
      })
      .catch((err) => {
        alert(err.msg)
      })
  }

  deleteQuality(text,record){
    this.deleteRP && this.deleteRP.request.abort()
    this.deleteRP = apis.recommend.deleteRecommend(2, record.Id); // channel keywords tag
    this.registerRequest(this.deleteRP.request);
    this.deleteRP.promise
      .then((res)=>{
        alert('删除成功')
        this.getQualityList();
        this.setState({deleted: true})
      })
      .catch((err)=>{
        alert('删除出错')
      })
  }
  render(){
    const {children} = this.props;
    const {currentPage,pageSize,qualityData} = this.state;
    const qualityColumns = [{
      title: '编号',
      dataIndex: 'Id',
      key: 'Id',
    }, {
      title: '名称',
      dataIndex: 'Name',
      key: 'Name'
    },
      {
        title: '播放量',
        dataIndex: 'TotalPlayTimes',
        key: 'TotalPlayTimes'
      },
      {
        title: '时长',
        dataIndex: 'Music.Duration',
        key: 'TotalDuration'
      },
      {
        title: '上传时间',
        dataIndex: 'UpdateTime',
        key: 'UpdateTime',
        render: (text, record) => (
          <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>
        )
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <a onClick={()=>{this.topQuality(text,record)}}>
              {record.Order && record.Order === 1 ? '取消置顶' : '置顶'}
            </a>
            <span className="ant-divider"/>
            <a onClick={()=>{this.deleteQuality(text,record)}}>
            删除
          </a>
        </span>
        ),
      }]

    return(
      <div className={'sem-main-content'}>
        <div className={'recommend-company-page'}>
          <LinkNavbar props={this.props}/>
          {children ? children :
            <div className={'recommend-company-content'}>
              <FuncButton wrapperName={'recommend-company-FucBtn'}
                          leftText={'添加'}
                          leftTo={{pathname:'/home/recommend/job/add', state:{num: qualityData.length}}}
                          showRight={false}
              />
              <AntTable columns={qualityColumns}  data={qualityData}
                        pagination={true} currentPage={currentPage} pageSize={pageSize}
                        onChange={(pagination) => {
                          this.setState({
                            currentPage: pagination.current,
                            pageSize: pagination.pageSize,
                          })
                        }}
              />
            </div>}
        </div>
      </div>
    );
  }
}

module.exports = Job;
